<template>
    <div class="progress-bar" :style="{ height: progressBarHeight }">
        <div :class="{'progress1':isMargin == true,'progress':isMargin == false}" :style="{ width: progressWidth }"></div>
        <div class="progress-label" :style="{ height: labelHeight, lineHeight: labelHeight,fontSize: fontSize,fontWeight: labelFontBond }">{{ `${ props.percentage != null ? props.percentage : 0 }%` }}</div>
    </div>
</template>
  
<script setup lang="ts">
const props = defineProps({
    percentage: {
        type: [Number, String, null] as PropType<number | string | null>,
        required: true,
        validator: (value: number) => value >= 0 && value <= 100,
    },
    height: {
        type: String,
        default: '22px',
    },
    labelHeight: {
        type: String,
        default: '22px',
    },
    fontsize: {
        type: String,
        default: '14px',
    },
    isIRateMargin: {
        type: Boolean,
        default: false,
    },
    labelBond:{
        type: Number,
        default: 700,
    }
});
const progressWidth = computed(() => `${ props.percentage != null ? props.percentage : 0 }%`);
const progressBarHeight = computed(() => props.height);
const labelHeight = computed(() => props.labelHeight);
const fontSize = computed(() => props.fontsize);
const isMargin = computed(() => props.isIRateMargin);
const labelFontBond = computed(() => props.labelBond);
</script>
  
<style scoped>
.progress-bar {
    width: 100%;
    /* height: 22px; */
    background-color: var(--el-bg-color-overlay);
    border-radius: 2px;
    overflow: hidden;
    position: relative; /* 添加这一行以便设置子元素的绝对定位 */
}

.progress {
    height: 100%;
    background-image: linear-gradient(90deg, var(--el-color-info-light-3) 0%, var(--el-color-info-light-8) 100%); /* 渐变色定义 */
}
.progress1 {
    height: 100%;
    background-image: linear-gradient(90deg, #bc615f 0%, #e3bcba 100%); /* 渐变色定义 */
}
.progress-label {
    position: absolute; /* 使文本元素相对于父元素绝对定位 */
    top: 1px; 
    right: 5px;     
    color: var(--el-text-color-primary); /* 文本颜色 */
    /* height: 22px; */
    /* line-height: 22px; 让内容垂直居中 */
    /* font-size: 14px; 文本大小 */
    /* font-weight: 700; */
}
</style>